<template >
    <div class="LivePage" >
        <van-nav-bar   right-text="关注" left-arrow @click-left="onClickLeft"
        />
        <div class="LivePage-title" >
            <span>OMINI官方旗舰店</span>
            <span>2333人观看</span>
        </div>
       <div class="LivePage-bottom" >
          <div   class="scroll " >
         <template v-for="(item,index) in list" >
          <li>{{item.name}}：{{item.title}}</li>
       
         </template>

          </div>
          <div class="LivePage-bottom-box" >
            <div>
              <input class="LivePage-bottom-input" v-model="chat"  type="text" name="" id="">
            </div>
            <div class="LivePage-bottom-button" >
              <van-button  style="background: #c1ab96;border:0;width:20vw;height:10vw" @click="sendchat"  round type="success">发送</van-button>
            </div>
          </div>
        
       </div>
    </div>
</template>
<script setup lang="ts" >

import {ref} from 'vue'

import { Vue3SeamlessScroll } from "vue3-seamless-scroll";
const onClickLeft = () => history.back();

// 消息滚动
let aa=ref(true)
let chat=ref('')
let  list= ref( [
        {
          title: "无缝滚动第一行无缝滚动第一行",
          name: "小明",
        },
        {
          title: "无缝滚动第二行无缝滚动第二行",
          name: "小明",
        },
        {
          title: "无缝滚动第三行无缝滚动第三行",
          name: "小明",
        },
        {
          title: "无缝滚动第四行无缝滚动第四行",
          name: "小明",
        },
        {
          title: "无缝滚动第五行无缝滚动第五行",
          name: "小明",
        },
        {
          title: "无缝滚动第六行无缝滚动第六行",
          name: "小明",
        },
        {
          title: "无缝滚动第七行无缝滚动第七行",
          name: "小明",
        },
        {
          title: "无缝滚动第八行无缝滚动第八行",
          name: "小明",
        },
        {
          title: "无缝滚动第九行无缝滚动第九行",
          name: "小明",
        },
      ],)
        let sendchat =function (){
          if(chat.value){
            list.value.push({ 'title': chat.value,'name':'小张'})
            chat.value=''
          console.log(list.value);
          }else{
            console.log(111);
            
          }
         
          
          
         
        }
</script>
<style>
*{
  list-style: none;
}
 .LivePage .van-nav-bar__content {
    width: 100vw;
    height: 15vw !important;
    border: 0 !important;
    position: fixed !important;
    top: 0 !important;
    left: 0;
    z-index: 10 !important;
}
 .LivePage .van-nav-bar__right{
    background: #fff;
    margin-right: 2vw;
    padding: .5vw 2vw ;
    border-radius:2vw ;
    height: 5vw;
    margin-top:5vw ;
}
 .LivePage .van-icon {
    color: #c5a28f !important;
}


     .LivePage .van-nav-bar__text {
        color: #c1ab96 !important;
        font-size: 1vw !important;
    }
    .LivePage{
        width: 100%;
        height: 100vh;
        background: url(https://api.isoyu.com/mm_images.php) no-repeat  ;
        background-size: 100vw 100vh ;
    }
    .LivePage-title{
        position: fixed;
        left: 20vw;
        top: 5vw;
        color: #fff;
    }
    .LivePage-title span:nth-child(1) {
        font-size: 4vw;
    }
    .LivePage-title span:nth-child(2) {
        font-size: 2vw;
    }
    .scroll {
       color: #fff;
       height:15vh ;
       width: 40vw;
       font-size: 3vw;
       overflow: hidden;
       overflow: auto;
      }
      .scroll li {
    
      }
      .LivePage-bottom{
        width: 100%;
        height: 25vh;
        position: fixed;
        bottom: 0;
        padding: 2vw;
    }
    .LivePage-bottom-input{
      background-color: transparent;
      border: 0;
      width: 7  0vw;
      border-bottom:1px solid #dedede;
      color: #000;
      margin-top: 2vw;
   
    }
    .LivePage-bottom-button{
    margin-left: 20px;
  
   
    }
    .LivePage-bottom-box{
      display: flex;
      padding: 2vw;

    }
</style>